<template>
  <div class="examine-search">
    <div data-before="校区">
      <el-select
        v-model="formGroup.schoolId"
        clearable
        filterable
        default-first-option
        placeholder="请选择校区"
        @change="getPeopleList"
      >
        <el-option label="全部" value></el-option>
        <el-option
          v-for="item in schoolList"
          :key="item.id"
          :label="item.schoolName"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div data-before="教研组">
      <el-select
        v-model="formGroup.groupId"
        clearable
        filterable
        default-first-option
        placeholder="输入教研组名称搜索"
        @change="getPeopleList"
      >
        <el-option label="全部" value></el-option>
        <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <div data-before="备课人">
      <el-select
        v-model="formGroup.creatorId"
        clearable
        filterable
        default-first-option
        placeholder="全部"
        @change="changeHandle"
      >
        <el-option
          v-for="item in peopleList"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div data-before="类型">
      <el-select
        v-model="formGroup.type"
        clearable
        filterable
        default-first-option
        placeholder="全部"
        @change="changeHandle"
      >
        <el-option label="全部" value="0"></el-option>
        <el-option label="一对一" value="1"></el-option>
        <el-option label="小组课" value="2"></el-option>
      </el-select>
    </div>
    <div data-before="状态">
      <el-select v-model="formGroup.status" @change="changeHandle" placeholder="全部">
        <el-option label="全部" value></el-option>
        <el-option label="未审核" value="0"></el-option>
        <el-option label="未通过" value="2"></el-option>
        <el-option label="已通过" value="1"></el-option>
      </el-select>
    </div>
    <div data-before="备课时间">
      <el-date-picker
        v-model="timer"
        type="daterange"
        @change="timerChange"
        :shortcuts="shortcuts"
        format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
    <p>
      <el-button type="primary" @click="submit">查询</el-button>
      <el-button type="primary" @click="submit('reset')">重置</el-button>
    </p>
  </div>
</template>

<script lang='ts'>
import { ref } from "vue";
import axios from "axios";
import Moment from "moment";
import { useStore } from "vuex";
export default {
  setup(props, { emit }) {
    /** 表单查询条件 */
    let formGroup = ref({
      schoolId: "",
      groupId: "",
      creatorId: "",
      type: "",
      startTime: "",
      endTime: "",
      status: "",
    });
    /** 日期时间 */
    let timer: any = ref([]);
    /** 校区可选值列表 */
    let schoolList = ref([]);
    /** 教研组可选值列表 */
    let groupList = ref([]);
    /** 备课人可选值列表 */
    let peopleList = ref([]);
    let store = useStore();
    let shortcuts = [
      {
        text: "最近一天",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
          return [start, end];
        })(),
      },
      {
        text: "最近一周",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        })(),
      },
      {
        text: "最近30天",
        value: (() => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        })(),
      },
    ];
    /** 获取校区、教研组可选值列表 */
    const getSchoolAndGroupList = async () => {
      let parameter = {
        current: 1,
        size: 2000,
        schoolName: "",
        userId: store.getters.userInfo.user.id,
      };
      let params = {
        groupName: "",
        userId: store.getters.userInfo.user.id,
      };
      let schoolRes: any = await axios.post(
        "/permission/user/querySchoolByUserId",
        parameter
      );
      schoolList.value = schoolRes.json;
      let groupRes: any = await axios.get(
        "/permission/user/queryGroupByUserId",
        {params}
      );
      groupList.value = groupRes.json;
    };
    getSchoolAndGroupList();
    const getPeopleList = async () => {
      let result: any = await axios.post("/permission/user/queryUserList", {
        groupId: formGroup.value.groupId,
        schoolId: formGroup.value.schoolId,
      });
      peopleList.value = result.json;
      submit("");
    };
    getPeopleList();
    const changeHandle = () => {
      submit("");
    };
    /** 时间选项改变时 */
    const timerChange = (val: string[]) => {
      if (val && val[0] && val[1]) {
        formGroup.value.startTime = Moment(val[0]).format("YYYY/MM/DD");
        formGroup.value.endTime = Moment(val[1]).format("YYYY/MM/DD");
        submit("");
      } else {
        formGroup.value.startTime = "";
        formGroup.value.endTime = "";
        submit("");
      }
    };
    /** 提交搜索 */
    const submit = (tips: any) => {
      if (tips === "reset") {
        formGroup.value = {
          schoolId: "",
          groupId: "",
          creatorId: "",
          type: "",
          startTime: "",
          endTime: "",
          status: "",
        };
        timer.value = [];
        emit("submit", formGroup, "reset");
      } else emit("submit", formGroup);
    };
    return {
      formGroup,
      schoolList,
      peopleList,
      groupList,
      shortcuts,
      timerChange,
      timer,
      changeHandle,
      getPeopleList,
      submit,
    };
  },
};
</script>

<style scoped lang="scss">
.examine-search {
  & > div {
    display: inline-block;
    margin-right: 40px;
    .cascader {
      display: inline-block;
    }
  }
  & > p {
    display: inline-block;
  }
  :deep(.el-input__inner) {
    border-radius: 0 4px 4px 0 !important;
  }
  & > div::before {
    text-align: center;
    content: attr(data-before);
    display: inline-block;
    height: 35.5px;
    width: 100px;
    margin: 0px 0px 15px 0px;
    padding: 0 15px;
    line-height: 34.5px;
    white-space: nowrap;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;
    border-right: 0;
    background: #fff4df;
    box-sizing: border-box;
    z-index: 1;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>
